<template>
	<view class="container">
		<view class="example">
			<uni-forms :modelValue="formData" :rules="rules" ref="formData" labelWidth="80px">
				<uni-forms-item label="日期" required name="readDate">
					<uni-datetime-picker v-model="formData.readDate" type="date" return-type="date" disabled/>
				</uni-forms-item>
				<uni-forms-item label="宿舍">
					<uni-data-picker placeholder="请选择宿舍" popup-title="请选择宿舍" :localdata="dataTree"
						@change="onfloorchange">
					</uni-data-picker>
					<!-- 		<uni-data-select v-model="formData.dormitoryid" :localdata="buildingList"
						@change="change"></uni-data-select> -->
				</uni-forms-item>
				<uni-forms-item label="房间" required name="dormitoryid">
					<uni-data-checkbox v-model="formData.dormitoryid" :localdata="roomList" />
				</uni-forms-item>

				<uni-forms-item name="numberdegrees" label="度数" required>
					<input class="custom-input" v-model="formData.numberdegrees" type="digit" placeholder="请输入数值" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		getDormitorytree,
		getbuildingName,
		getDormitoryFloortree,
		getroomNameList
	} from '@/api/dormitory'
	import {
		listDegrees,
		getDegrees,
		delDegrees,
		addDegrees,
		updateDegrees
	} from '@/api/degrees.js'
	import moment from 'moment';
	export default {
		data() {
			return {
				formData: {
					dormitoryid: '',
					readDate: new Date(),
					numberdegrees: null
				},
				dataTree: [],
				rules: {
					dormitoryid: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					readDate: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					numberdegrees: {
						rules: [{
							required: true,
							errorMessage: '度数不能为空'
						}, {
							format: 'number',
							errorMessage: '度数只能输入数字'
						}]
					}
				},
				// 单选数据源
				buildingList: [],
				roomList: [],
			}
		},
		created() {
			this.GetDormitorytree()
		},
		onReady() {
			this.$refs.formData.setRules(this.rules)
		},
		methods: {
			GetDormitorytree() {
				getDormitoryFloortree().then((response) => {
					this.dataTree = response;
				});
			},
			GetbuildingName() {
				getbuildingName().then((response) => {
					//this.buildingList=response;
					var result = response;
					for (var i = 0; i < result.length; i++) {
						let bu = {
							"text": result[i],
							"value": result[i]
						}
						this.buildingList.push(bu);
						console.log(result[i]);
					}
					console.log(response)
				});
			},
			submit() {
				this.$refs.formData.validate().then(res => {
					this.formData.readDate = moment(this.formData.readDate).format('YYYY-MM-DD');
					this.$modal.confirm("数据提交后将不能修改！确认提交吗？").then(() => {
							addDegrees(this.formData).then(response => {
								console.log(response)
								this.$modal.msgSuccess("保存成功")
							})
						})
						.catch(() => {
							// 用户点击了取消按钮或者关闭了对话框
							console.log('用户点击了取消或关闭了对话框');
							// 在这里执行相关操作
						});
				})
			},
			change(e) {
				console.log("e:", e);
			},
			onfloorchange(e) {
				var buildingname = e.detail.value[0].text;
				var floor = e.detail.value[1].text;
				console.log(buildingname);
				console.log(floor);
				let queryData = {
					"buildingName": buildingname,
					"floor": floor
				};
				getroomNameList(queryData).then((response) => {
					console.log(response);
					this.roomList=response
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}

	.custom-input {
		border: 1px solid #ccc;
		padding: 10px;
		border-radius: 5px;
		width: 100%;
		height: 35px;
	}
</style>